<template>
  <div class="box-border w-full h-full px-4 pb-10 overflow-y-auto">
    <div class="rounded-md border_blue !border-blue-500 w-32 flex items-center justify-center px-2">
      泵机组停运设置
    </div>
    <div class="w-full mt-2 text-base">
      <!-- 乌百线 -->
      <div>
        <div class="flex items-center font-bold">
          <el-checkbox v-model="wb_isShow" class="mr-2">乌尔禾站</el-checkbox>
        </div>
        <div v-show="wb_isShow" class="w-full text-base">
          <div
            class="w-[440px] h-[220px] bg-white rounded-lg shadow flex flex-col gap-2 py-4 box-border px-4"
          >
            <div class="flex items-center gap-4">
              <span>停运时间</span>
              <el-input v-model="wb_stopTime" class="!w-[160px]" />
              <span>小时</span>
            </div>
            <div class="flex items-center gap-4">
              <div class="flex items-center">
                <div class="cursor-pointer">
                  <div @click="wb_pumpShutdownSettingsVisible = !wb_pumpShutdownSettingsVisible">
                    <el-icon v-if="wb_pumpShutdownSettingsVisible" class="mr-2">
                      <ArrowDown />
                    </el-icon>
                    <el-icon v-else class="mr-2">
                      <ArrowRight />
                    </el-icon>
                    <span>停运泵机组</span>
                  </div>
                  <!-- 设置内容 -->
                  <div v-show="wb_pumpShutdownSettingsVisible" class="mt-3 space-y-3">
                    <div class="">
                      <div class="mt-4 text-base w-[340px]">
                        <div class="flex h-[50px]">
                          <div
                            class="bg_table_header flex items-center justify-center border w-[120px] box-border"
                          >
                            泵站
                          </div>
                          <div
                            class="box-border flex items-center justify-center flex-1 bg_table_header topBorder bottomBorder rightBorder"
                          >
                            泵配置
                          </div>
                        </div>
                        <div class="flex h-[40px]">
                          <div
                            class="flex items-center justify-center rightBorder bottomBorder leftBorder2 w-[120px] box-border"
                          >
                            泵站1
                          </div>
                          <div class="flex items-center flex-1 px-5 rightBorder bottomBorder">
                            <div class="flex justify-between w-full">
                              <div><el-checkbox v-model="wb_stopPump1">P-1</el-checkbox></div>
                              <div><el-checkbox v-model="wb_stopPump2">P-2</el-checkbox></div>
                              <div><el-checkbox v-model="wb_stopPump3">P-3</el-checkbox></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 百克线 -->
      <div>
        <div class="flex items-center font-bold">
          <el-checkbox v-model="bk_isShow" class="mr-2">百克站</el-checkbox>
        </div>
        <div v-show="bk_isShow" class="w-full text-base">
          <div
            class="w-[440px] h-[220px] bg-white rounded-lg shadow flex flex-col gap-2 py-4 box-border px-4"
          >
            <div class="flex items-center gap-4">
              <span>停运时间</span>
              <el-input v-model="bk_stopTime" class="!w-[160px]" />
              <span>小时</span>
            </div>
            <div class="flex items-center gap-4">
              <div class="flex items-center">
                <div class="cursor-pointer">
                  <div @click="bk_pumpShutdownSettingsVisible = !bk_pumpShutdownSettingsVisible">
                    <el-icon v-if="bk_pumpShutdownSettingsVisible" class="mr-2">
                      <ArrowDown />
                    </el-icon>
                    <el-icon v-else class="mr-2">
                      <ArrowRight />
                    </el-icon>
                    <span>停运泵机组</span>
                  </div>
                  <!-- 设置内容 -->
                  <div v-show="bk_pumpShutdownSettingsVisible" class="mt-3 space-y-3">
                    <div class="">
                      <div class="mt-4 text-base w-[340px]">
                        <div class="flex h-[50px]">
                          <div
                            class="bg_table_header flex items-center justify-center border w-[120px] box-border"
                          >
                            泵站
                          </div>
                          <div
                            class="box-border flex items-center justify-center flex-1 bg_table_header topBorder bottomBorder rightBorder"
                          >
                            泵配置
                          </div>
                        </div>
                        <div class="flex h-[40px]">
                          <div
                            class="flex items-center justify-center rightBorder bottomBorder leftBorder2 w-[120px] box-border"
                          >
                            泵站1
                          </div>
                          <div class="flex items-center flex-1 px-5 rightBorder bottomBorder">
                            <div class="flex justify-between w-full">
                              <div><el-checkbox v-model="bk_stopPump1">P-1</el-checkbox></div>
                              <div><el-checkbox v-model="bk_stopPump2">P-2</el-checkbox></div>
                              <div><el-checkbox v-model="bk_stopPump3">P-3</el-checkbox></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 新81#线 -->
      <div>
        <div class="flex items-center font-bold">
          <el-checkbox v-model="new81_isShow" class="mr-2">乌百线</el-checkbox>
        </div>
        <div v-show="new81_isShow" class="w-full text-base">
          <div
            class="w-[440px] h-[220px] bg-white rounded-lg shadow flex flex-col gap-2 py-4 box-border px-4"
          >
            <div class="flex items-center gap-4">
              <span>停运时间</span>
              <el-input v-model="new81_stopTime" class="!w-[160px]" />
              <span>小时</span>
            </div>
            <div class="flex items-center gap-4">
              <div class="flex items-center">
                <div class="cursor-pointer">
                  <div
                    @click="new81_pumpShutdownSettingsVisible = !new81_pumpShutdownSettingsVisible"
                  >
                    <el-icon v-if="new81_pumpShutdownSettingsVisible" class="mr-2">
                      <ArrowDown />
                    </el-icon>
                    <el-icon v-else class="mr-2">
                      <ArrowRight />
                    </el-icon>
                    <span>停运泵机组</span>
                  </div>
                  <!-- 设置内容 -->
                  <div v-show="new81_pumpShutdownSettingsVisible" class="mt-3 space-y-3">
                    <div class="">
                      <div class="mt-4 text-base w-[340px]">
                        <div class="flex h-[50px]">
                          <div
                            class="bg_table_header flex items-center justify-center border w-[120px] box-border"
                          >
                            泵站
                          </div>
                          <div
                            class="box-border flex items-center justify-center flex-1 bg_table_header topBorder bottomBorder rightBorder"
                          >
                            泵配置
                          </div>
                        </div>
                        <div class="flex h-[40px]">
                          <div
                            class="flex items-center justify-center rightBorder bottomBorder leftBorder2 w-[120px] box-border"
                          >
                            泵站1
                          </div>
                          <div class="flex items-center flex-1 px-5 rightBorder bottomBorder">
                            <div class="flex justify-between w-full">
                              <div><el-checkbox v-model="new81_stopPump1">P-1</el-checkbox></div>
                              <div><el-checkbox v-model="new81_stopPump2">P-2</el-checkbox></div>
                              <div><el-checkbox v-model="new81_stopPump3">P-3</el-checkbox></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ArrowRight, ArrowDown } from '@element-plus/icons-vue'
// 响应式数据

const wb_isShow = ref(false)
const wb_pumpShutdownSettingsVisible = ref(false)
const wb_stopTime = ref('2')
const wb_stopPump1 = ref(true)
const wb_stopPump2 = ref(true)
const wb_stopPump3 = ref(true)

const bk_isShow = ref(false)
const bk_pumpShutdownSettingsVisible = ref(false)
const bk_stopTime = ref('2')
const bk_stopPump1 = ref(false)
const bk_stopPump2 = ref(false)
const bk_stopPump3 = ref(false)

const new81_isShow = ref(false)
const new81_pumpShutdownSettingsVisible = ref(false)
const new81_stopTime = ref('2')
const new81_stopPump1 = ref(false)
const new81_stopPump2 = ref(false)
const new81_stopPump3 = ref(false)

const validateSettings = () => {
  // 至少选择一条管线进行泄漏模拟
  if (!wb_isShow.value && !bk_isShow.value && !new81_isShow.value) {
    ElMessage.error('请至少选择一条管线')
    return false
  }

  // 乌百线泄漏校验
  if (wb_isShow.value) {
    if (!wb_stopTime.value) {
      ElMessage.error('乌百线停运时间不能为空')
      return false
    }
  }

  // 百克线泄漏校验
  if (bk_isShow.value) {
    if (!bk_stopTime.value) {
      ElMessage.error('百克线停运时间不能为空')
      return false
    }
  }

  // 新81#线泄漏校验
  if (new81_isShow.value) {
    if (!new81_stopTime.value) {
      ElMessage.error('新81#线停运时间不能为空')
      return false
    }
  }

  return true
}

const isFormValid = computed(() => {
  // 乌百线泄漏校验
  if (wb_isShow.value) {
    if (!wb_stopTime.value) {
      return false
    }
  }

  // 百克线泄漏校验
  if (bk_isShow.value) {
    if (!bk_stopTime.value) {
      return false
    }
  }

  // 新81#线泄漏校验
  if (new81_isShow.value) {
    if (!new81_stopTime.value) {
      return false
    }
  }

  // 至少选择一条管线进行泄漏模拟
  if (!wb_isShow.value && !bk_isShow.value && !new81_isShow.value) {
    return false
  }

  return true
})

const getParamsData = () => {
  return {
    M_1: wb_isShow.value ? '1' : '0',
    M_2: bk_isShow.value ? '1' : '0',
    M_3: new81_isShow.value ? '1' : '0',
    TIME_1: wb_stopTime.value,
    TIME_2: bk_stopTime.value,
    TIME_3: new81_stopTime.value,
    SHUT_S1_1: wb_stopPump1.value ? '1' : '0',
    SHUT_S2_1: wb_stopPump2.value ? '1' : '0',
    SHUT_S3_1: wb_stopPump3.value ? '1' : '0',
    SHUT_S1_2: bk_stopPump1.value ? '1' : '0',
    SHUT_S2_2: bk_stopPump2.value ? '1' : '0',
    SHUT_S3_2: bk_stopPump3.value ? '1' : '0',
    SHUT_S1_3: new81_stopPump1.value ? '1' : '0',
    SHUT_S2_3: new81_stopPump2.value ? '1' : '0',
    SHUT_S3_3: new81_stopPump3.value ? '1' : '0'
  }
}

// 暴露给父组件的方法和数据
defineExpose({
  validateSettings,
  isFormValid,
  getParamsData
})
</script>

<style lang="scss" scoped>
.leftBorder {
  border-left: 1px dashed black;
  border-image: repeating-linear-gradient(
      to bottom,
      black 0,
      black 8px,
      transparent 8px,
      transparent 16px
    )
    1;
}
.border {
  border: 1px solid black;
}
.rightBorder {
  border-right: 1px solid black;
}
.bottomBorder {
  border-bottom: 1px solid black;
}
.topBorder {
  border-top: 1px solid black;
}
.leftBorder2 {
  border-left: 1px solid black;
}

.bottomDashBorder {
  border-bottom: 1px dashed rgba(53, 63, 64, 0.4);
  border-image: repeating-linear-gradient(
      to right,
      rgba(53, 63, 64, 0.4) 0,
      rgba(53, 63, 64, 0.4) 8px,
      transparent 8px,
      transparent 16px
    )
    1;
}

.shadow {
  box-shadow: 3px 3px 11px 0px rgba(0, 0, 0, 0.15);
}
:deep(.no-style-input) {
  .el-input__wrapper {
    background: none;
    box-shadow: none;
    padding: 0;
  }

  .el-input__inner {
    border: none;
    background: none;
  }
}

.line {
  background: linear-gradient(
    to right,
    rgba(53, 63, 64, 0),
    rgba(53, 63, 64, 1),
    rgba(53, 63, 64, 0)
  );
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.bg_detail {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.bg_table_header {
  // background-color: rgba(247, 247, 247, 1);
}

.custom-button {
  background-color: rgba(69, 122, 178, 0.18);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid rgba(69, 122, 178, 1);
  border-radius: 6px;
  color: rgba(69, 122, 178, 0.8);
  width: 140px;
  height: 40px;

  cursor: pointer;
  &:hover {
    background-color: rgba(69, 122, 178, 1);
    border: 1px solid rgba(69, 122, 178, 1);
    color: white;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
  }
}

.custom-button-not-active {
  cursor: not-allowed;
  background-color: rgba(128, 128, 128, 0.58);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid gray;
  border-radius: 6px;
  color: white;
  width: 140px;
  height: 40px;
  &:hover {
    background-color: gray;
    border: 1px solid gray;
    color: white;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
  }
}

.border_blue {
  border: 2px solid rgba(69, 122, 178, 1);
}
</style>
